<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>29_事件的类型</title>
    <link rel="stylesheet" href="./css/basic.css">
    <style>
        .container,
        .container_02 {
            margin: 20px auto;
            width: 50vw;
            height: 200px;
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <input id="txtInput" type="text">
    <div class="container_02">
        当前移动：
    </div>
    <div class="container" index="0">
        当前移动：
    </div>
    <div class="container" index="1">
        当前移动：
    </div>
    <div class="container" index="2">
        当前移动：
    </div>
    <script>
        document.querySelectorAll(".container").forEach((dom, index) => {
                // let count1,count2,count3 = 0
                let count1 = 0
                let count2 = 0
                let count3 = 0
                dom.addEventListener("mousemove", (event) => {
                    // 判断当前dom属于哪个块
                    if (dom.getAttribute("index") === "0") {
                        count1++
                        event.target.innerText = `当前移动：${count1}` // 触发事件对象的本身
                        event.target.style.color = "blue"
                            // document.querySelector("div[index='0']").innerText = `当前移动：${count1}`
                    } else if (dom.getAttribute("index") === "1") {
                        count2++
                        event.target.innerText = `当前移动：${count2}`
                        event.target.style.color = "red"
                            // document.querySelector("div[index='1']").innerText = `当前移动：${count2}`
                    } else {
                        count3++
                        event.target.innerText = `当前移动：${count3}`
                        event.target.style.color = "black"
                        event.target.style.backgroundColor = "brown"
                            // document.querySelector("div[index='2']").innerText = `当前移动：${count3}`
                    }


                })
            })
            // document.querySelector("#txtInput").addEventListener("change", () => {
            //     alert(123)
            // })
        document.querySelector("#txtInput").addEventListener("input", () => {
            // alert(123)
        })
        document.querySelector("#txtInput").addEventListener("keyup", (event) => {
            // 判断回车按键
            if (event.key === "Enter") {
                alert("您按下了回车键")
            }
            if (event.keyCode === 13) {
                alert("您按下了回车键")
            }

        })
        document.querySelector("#txtInput").addEventListener("keydown", () => {
            //alert("按下")
        })
    </script>
</body>

</html>